import styled from 'styled-components'
import { useStore } from '../store'

const Wrapper = styled.div<any>`
  display: flex;
  flex-direction: column;
  gap: 1rem;

  font-size: 1.6rem;
`

export default function Page () {
  // const { bgColor, ftColor } = useStore((state:any) => state)
  const setBGColor = useStore((state:any) => state.setBGColor)
  const setFTColor = useStore((state:any) => state.setFTColor)

  const onChange = (type: 'BG' | 'FT') => (e:any) => {
    // console.log(type, e.target.value)
    if (type === 'BG') {
      setBGColor(e.target.value)
    } else {
      setFTColor(e.target.value)
    }
  }
  return (
    <Wrapper>
      <h1>Setting Page</h1>
      <label htmlFor="">Background Color</label>
      <input type="color" onChange={onChange('BG')} />
      <label htmlFor="">Font Color</label>
      <input type="color" onChange={onChange('FT')} />
    </Wrapper>
  )
}
